<template>
  <div class="homepage_container">
    <div class="homepage_header"><h1>汇开鸿测试管理平台</h1></div>
    <div class="homepage_menu">
      <h2>首页</h2>
      <el-col :span="24">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          unique-opened="true"
          router="false"
        >
          <el-sub-menu
            :index="menu.id + ''"
            v-for="menu in NewMenus"
            :key="menu.id"
          >
            <template #title>
              <el-icon><location /></el-icon>
              <span>{{ menu.title }}</span>
            </template>
            <template v-for="submenu in menu.children">
              <el-menu-item
                :index="'/' + menu.name + '/' + submenu.name"
                v-if="!submenu.hidden"
                :key="submenu.id"
                >{{ submenu.title }}</el-menu-item
              >
            </template>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </div>
    <div class="homepage_content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, computed } from "vue";
//分析目录结构：[{title:"一级菜单"，children：[{二级菜单对象1},{二级菜单对象2},{...}]}]
//分析目录结构2：{一级菜单id：{title：‘一级菜单’，children：{二级菜单，{二级菜单2}}}}
import { useStore } from "vuex";
interface MenuObj {
  parentId: number;
  title: string;
  id: number;
  hidden: 1 | 0;
  children?: MenuObj[];
  name: string;
}

interface NewMenus {
  [key: number]: MenuObj[];
}
const store = useStore();
// const NewMenus: NewMenus = store.getters.getNewMenus;
const NewMenus = computed<NewMenus>(() => store.getters.getNewMenus);
// console.log("看看newmenus:" + NewMenus.id);
</script>

<style lang="less" scoped>
.homepage_container {
  position: relative;
  height: 100%;

  .homepage_header {
    height: 70px;
    background-color: antiquewhite;
  }
  .homepage_menu {
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 0;
    width: 250px;
    background-color: gray;
  }
  .homepage_content {
    position: absolute;
    top: 70px;
    right: 0;
    left: 250px;
    bottom: 0;
    background-color: skyblue;
  }
}
</style>
